<script>
  import sheep from '@/sheep';

  export default {
    name: 'textareGap',
    data() {
      return {
        textValue: '',
      };
    },
    props: {
      margin: {
        type: String,
        default: '0 0 0 0',
      },
      title: {
        type: String,
        default: '备注',
      },
      placeholder: {
        type: String,
        default: '请输入个人简介(500字以内)',
      },
      color: {
        type: String,
        default: '#4B4B4B',
      },
      maxlength: {
        type: Number,
        default: 500,
      },
      value: {
        type: String,
        default: '',
      },
      personalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      flag: {
        type: Number,
        default: 0,
      },
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    watch: {
      value: {
        deep: true,
        handler(newValue, oldValue) {
          console.log(newValue);
          this.textValue = newValue;
        },
        immediate: true,
      },
    },
    methods: {
      save() {
        this.$emit('save', this.textValue);
      },
      async goNotePath() {
        console.log(123123);
        const { code, msg } = await sheep.$api.family.checkAuth({
          family_id: this.options.family_id,
          action: 'add',
        });
        if (code != 1 && this.options.is_use != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        uni.$once('goNotePath', () => {
          this.$emit('closeFeatured');
        });
        uni.setStorageSync('notePath', this.textValue)
        sheep.$router.go('/pages/familyPage/signature', {
          member_id: this.personalData.id,
          is_sign: 2,
          flag: this.flag,
        });
      },
    },
  };
</script>

<template>
  <view class="textareGap" :style="{
    margin: margin
  }" @click="goNotePath">
    <view class="textareGap_top ml_20">
      <text class="textareGap_top_text">{{ title }}</text>
    </view>
    <view class="textareGap_center mt_10 ml_20" style="position: relative">
      <view class="z_1" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0" @click.stop="goNotePath">

      </view>
      <textarea class="textareGap_center_textarea" v-model="textValue"
                :maxlength="maxlength" :placeholder="placeholder"
                placeholder-class="textarePlaceholder" auto-height
                disabled

      ></textarea>
    </view>
    <!--    <view class="textareGap_bottom row items-center justify-end mt-26">-->
    <!--      <view class="textareGap_bottom_btn allRowCenter" @click="save">-->
    <!--        <text class="textareGap_bottom_btn_text">保存</text>-->
    <!--      </view>-->
    <!--    </view>-->
  </view>
</template>

<style scoped lang="scss">
  .textareGap {
    width: 702rpx;
    padding: 19rpx 0;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;

    .textareGap_top {
      width: 666rpx;

      .textareGap_top_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }
    }

    .textareGap_center {
      width: 666rpx;
      border-radius: 17rpx 17rpx 17rpx 17rpx;
      overflow: hidden;
      background: #EDEDED;

      .textareGap_center_textarea {
        margin: 18rpx 24rpx;
        width: 636rpx;
        min-height: 390rpx;
      }

      ::v-deep .textarePlaceholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }
    }

    .textareGap_bottom {
      width: 666rpx;

      .textareGap_bottom_btn {
        width: 133rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .textareGap_bottom_btn_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }
</style>